<template>
  <div id="app">
    <router-view />
    <van-tabbar route v-show="$route.meta.isShow">
      <van-tabbar-item class="footer-icon" icon="home-o" to="/home">首页</van-tabbar-item>
      <van-tabbar-item class="footer-icon" icon="label-o" :to="{name:'Classify'}">分类</van-tabbar-item>
      <van-tabbar-item class="footer-icon" icon="cash-on-deliver" to="/flowerchip">花现</van-tabbar-item>
      <van-tabbar-item class="footer-icon" icon="shopping-cart-o" :info="getAllCount" to="/cart">购物车</van-tabbar-item>
      <van-tabbar-item class="footer-icon" icon="smile-o" to="/mine">我的</van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<style>
html {
  font-size: 26.6666666vw;
}
html,
body,
#app {
  width: 100%;
  height: 100%;
}
/* .van-tabbar--fixed {
  position: static;
} */
#app .van-tabbar--fixed {
  padding-top: 0.1rem;
}
#app {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  display: flex;
  flex-direction: column;
}
.van-icon {
  font-size: 0.23rem;
}
.footer-icon {
  font-size: 0.14rem;
}
</style>
<script>
import axios from "axios";
import { mapState, mapMutations, mapAction, mapGetters } from "vuex";
export default {
  data() {
    return {};
  },
  created() {
    let token = localStorage.getItem("token");
    // console.log(token);
    axios
      .get("http://192.168.17.95:3000/api/v1/cart/cartlist", {
        headers: {
          yangnb: `ynb ${token}`
        }
      })
      .then(res => {
        // console.log(res);
        // console.log(res.data.carts);
        this.carts = res.data.carts;
        this.savecarts({
          carts: res.data.carts
        });
      })
      .catch(err => {
        // console.log(err);
      });
  },
  methods: {
    ...mapMutations("product", ["save", "savecarts"])
  },
  computed: {
    ...mapGetters("product", ["getAllCount"]),
    ...mapState("product", ["car"])
  }
};
</script>
